<%--
  Created by IntelliJ IDEA.
  User: libowu
  Date: 18-10-15
  Time: 下午5:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %><!-- 引入jstl库 -->
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="/css/bootstrap.css">

    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

    <style type="text/css">

        body{
            overflow: hidden;
            background: #2aabd2;
        }
        ul{
            padding: 0px;
            margin: 0px;
            list-style: none;
        }
        a{
            text-decoration: none;
        }

        /*整个框架的样式*/
        .parent{
            height: 100%;
            width: 100%;
            padding-bottom: 80px;
            overflow: hidden;
        }

        /*底部导航条的css样式*/
        .bottomBar{
            background: rgba(0,0,0,0.3);
            height: 100%;
            width: 60px;
            margin: 0 auto;
            position: absolute;
            padding-left: 5px;
            padding-right: 5px;
            overflow: hidden;
        }

        /*可用的应用栏*/
        .bottomBar .application{
            height: 90%;
            width: 100%;
        }

        /*应用栏列表*/
        .bottomBar .application li{
            margin-top: 16px;
            text-align: center;
            align-content: center;
            color: white;
            cursor: pointer;
        }

        /*鼠标移动过应用图标时产生的缩放效果设置*/
        .bottomBar .application li:hover{
            transform: scale(1.1,1.1);
        }

        /*添加应用*/
        .bottomBar .addApplication{
            height: 10%;
            width: 100%;
            text-align: center;
            align-content: center;
            color: white;
            cursor: pointer;
        }

        /*鼠标移动过添加应用图标时产生的缩放效果设置*/
        .bottomBar .addApplication:hover{
            transform: scale(1.1,1.1);
        }

        /*顶部导航条*/
        .topBar{
            position: absolute;
            left: 60px;
            right: 0px;
            top: 0px;
            width: 100%;
            height: 50px;
            background: rgba(0,0,0,0.3);
            border-left: 1px solid rgba(255,255,255,0.2);
        }

        /*导航条列表*/
        .topBar .title{
            width: 87%;
            height: 100%;
            float: left;
        }

        /*当前用户区域*/
        .topBar .user{
            width: 13%;
            height: 100%;
            float: right;
            line-height: 50px;
            display: flex;
            padding-top: 10px;
        }

        /*用户头像设置*/
        .topBar .user .userImg{
            width: 32px;
            height: 32px;
            overflow: hidden;
            text-align: center;
            align-content: center;
            line-height: 32px;
            border-radius: 16px;
            overflow: hidden;
            background: url("/img/appLogo/head.png") no-repeat center;
        }

        .topBar .user .setting{
            flex: 1;
            margin-left: 10px;
        }

        .topBar .title li{
            float: left;
            height: 100%;
            width: 5%;
            margin-right: 3px;
        }

        /*导航条的条目样式*/
        .topBar ul li .topBarContent{
            width: 100%;
            height: 100%;
            background: deepskyblue;
            line-height: 50px;
            text-align: center;
            position: relative;
            display: none;
            cursor: pointer;
            text-decoration: none;
            color: white;
        }

        /*鼠标移过顶部导航条是条目时候变色*/
        .topBar ul li .topBarContent:hover{
            background: #4084D6;
        }

        /*鼠标移过顶部导航条是条目时显示取消按钮*/
        .topBar ul li .topBarContent:hover .back{
            display: block;
        }

        /*导航条的条目返回按钮*/
        .topBar ul li .topBarContent .back{
            position: absolute;
            right: 5px;
            top: 5px;
            display: block;
            height: 16px;
            width: 16px;
            line-height: 16px;
            text-align: center;
            align-content: center;display: none;
        }

        /*内容展示区*/
        .showContent{
            position: absolute;
            left: 60px;
            right: 0px;
            top: 50px;
            bottom: 0px;
            padding: 10px;

        }

        /*内容展示区的正文部分*/
        .showContent iframe{
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<script type="text/javascript">
    window.location="/futer/login";

    function sendTo(info){
        show=document.getElementById("showIframe");
        show.src=info;
    }
</script>

<body>

<!--整个大框架-->
<div class="parent">

    <!--底部导航条-->
    <div class="bottomBar">

        <!--可选用控件-->
        <div class="application">
            <ul>
               <%-- <li onclick="sendTo('/test/home')">
                    <div>
                        <img src="img/add.png" width="36"/>
                    </div>
                    <span>首页</span>
                </li>--%>
                <c:if test="${application.size()!=0}">
                    <c:forEach items="${application}" var="app">
                        <li onclick="sendTo('${app.getUrl}')">
                            <div>
                                <img src="img/appLogo/add.png" width="36"/>
                            </div>
                            <span>商城</span>
                        </li>
                    </c:forEach>
                </c:if>
               <%-- <li onclick="sendTo('/test/market')">
                    <div>
                        <img src="img/add.png" width="36"/>
                    </div>
                    <span>商城</span>
                </li>

                <li onclick="sendTo('/test/shoppingCat')">
                    <div>
                        <img src="img/add.png" width="36"/>
                    </div>
                    <span>购物车</span>
                </li>

                 <li onclick="sendTo('/test/collectList')">
                     <div>
                         <img src="/img/add.png" width="36"/>
                     </div>
                     <span>收藏夹</span>
                 </li>

                <li onclick="sendTo('/test/my')">
                    <div>
                        <img src="img/add.png" width="36"/>
                    </div>
                    <span>我的</span>
                </li>--%>
            </ul>
        </div>

        <!--添加按钮-->
        <div class="addApplication">
            <!--添加控件按钮-->
            <a href="#"><img src="/img/appLogo/add.png" width="36"/></a>
            <span>添加</span>
        </div>
    </div>

    <!--顶部导航条-->
    <div class="topBar">

        <!--已打开的应用-->
        <ul class="title">
            <li>
                <a class="topBarContent">
                    <span>你好</span>
                    <span class="back">
                        <img src="/img/appLogo/back.png" width="16"/>
                    </span>
                </a>
            </li>

            <li>
                <a class="topBarContent">
                    <span>你好</span>
                    <span class="back">
                        <img src="/img/appLogo/back.png" width="16"/>
                    </span>
                </a>
            </li>

            <li>
                <a class="topBarContent">
                    <span>你好</span>
                    <span class="back">
                        <img src="/img/appLogo/back.png" width="16"/>
                    </span>
                </a>
            </li>

            <li>
                <a class="topBarContent">
                    <span>你好</span>
                    <span class="back">
                        <img src="/img/appLogo/back.png" width="16"/>
                    </span>
                </a>
            </li>

            <li>
                <a class="topBarContent">
                    <span>你好</span>
                    <span class="back">
                        <img src="/img/appLogo/back.png" width="16"/>
                    </span>
                </a>
            </li>

        </ul>

        <!--当前用户-->
        <div class="user">

            <!--当前用户头像-->
            <div class="userImg">

            </div>

            <!--用户设置区域-->
            <div class="dropdown setting">
                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    <%--${name}--%>
                    <%--获取session的值--%>
                   <%-- ${sessionScope.name }--%>
                        libowu
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                    <li><a href="#">用户设置</a></li>
                    <li><a href="#">退出登录</a></li>
                    <li><a href="#">注销</a></li>
                </ul>
            </div>
        </div>
    </div>

    <!--内容展示区-->
    <div class="showContent">
        <iframe src="https://www.baidu.com" frameborder="no" scrolling="auto" id="showIframe" allowtransparency="true"/>
    </div>
</div>

</body>
</html>
